<script setup>
import { ref, onMounted } from "vue";

import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";
defineProps({
  msg: String,
});

onMounted(() => {
  var district = new AMap.DistrictSearch(opts);
  console.log(district.search);
  district.search("金华市", function (status, result) {
    console.log(result);
    var bounds = result.districtList[0].boundaries;
    var mask = [];
    for (var i = 0; i < bounds.length; i += 1) {
      mask.push([bounds[i]]);
    }
    var map = new AMap.Map("container", {
      mask: mask,
      center: [120.64, 28.55],
      disableSocket: true,
      viewMode: "3D",
      showLabel: false,
      labelzIndex: 130,
      pitch: 0,
      zoom: 11,
      layers: [
        // new AMap.TileLayer.RoadNet({
        //   //rejectMapMask:true
        // }),
        new AMap.TileLayer.Satellite(),
      ],
    });
    var maskerIn = new AMap.Marker({
      position: [116.501415, 39.926055],
      map: map,
    });
    var maskerOut = new AMap.Marker({
      //区域外的不会显示
      position: [117.001415, 39.926055],
      map: map,
    });
    // //添加高度面
    var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
    map.add(object3Dlayer);
    var height = -8000;
    var color = "#0088ffcc"; //rgba
    var wall = new AMap.Object3D.Wall({
      path: bounds,
      height: height,
      color: color,
    });
    wall.transparent = true;
    object3Dlayer.add(wall);
    // 添加描边
    for (var i = 0; i < bounds.length; i += 1) {
      new AMap.Polyline({
        path: bounds[i],
        strokeColor: "#99ffff",
        strokeWeight: 4,
        map: map,
      });
    }
  });
});

var opts = {
  subdistrict: 0,
  extensions: "all",
  level: "city",
};
//利用行政区查询获取边界构建mask路径
//也可以直接通过经纬度构建mask路径
const addPoint = () => {
  var marker = new AMap.Marker({
    position: new AMap.LngLat(116.39, 39.9),
    offset: new AMap.Pixel(-10, -10),
    icon: "//vdata.amap.com/icons/b18/1/2.png", // 添加 Icon 图标 URL
    title: "北京",
  });

  map.add(marker);
};
</script>

<template>
  <div class="map-box">

    <div id="container"></div>
    <div class="model-map-box">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>Card name</span>
            <el-button class="button" text>Operation button</el-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
        <template #footer>Footer content</template>
      </el-card>

    </div>

  </div>
</template>

<style scoped>
.map-box {
  width: 100%;
  height: 100%;
  position: relative;
}

#container {
  width: 100%;
  height: 100%;
  background-color: #04162c !important;
}
.model-map-box{
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  z-index: 999999;
}
/* #04162c */
</style>
